<template>
  <el-card>
    <hr>
    <h3>基本信息</h3>
    <hr>
    <el-form>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="客户编号">{{customer.id}}</el-form-item>
        </el-col>
        <!--      <el-col :span="6">-->
        <!--        <el-form-item label="订单编号"></el-form-item>-->
        <!--      </el-col>-->
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="客户状态" v-if="customer.status==10">未订单客户一客到店</el-form-item>
          <el-form-item label="客户状态" v-if="customer.status==20">未订单客户二客到店</el-form-item>
          <el-form-item label="客户状态" v-if="customer.status==30">未订单客户—多客到店</el-form-item>
          <el-form-item label="客户状态" v-if="customer.status==40">订单客户—转单中</el-form-item>
          <el-form-item label="客户状态" v-if="customer.status==50">订单客户—已完成</el-form-item>
          <el-form-item label="客户状态" v-if="customer.status==60">订单客户—退/死单</el-form-item>
          <el-form-item label="客户状态" v-if="customer.status==70">待量房客户</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户类型" v-if="customer.type==10">现房客户</el-form-item>
          <el-form-item label="客户类型" v-if="customer.type==20">期房客户</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="客户姓名">{{customer.name}}</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户性别" v-if="customer.gender==1">女</el-form-item>
          <el-form-item label="客户性别" v-if="customer.gender==0">男</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年龄">{{customer.age}}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="联系电话">{{customer.contactPhone}}</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="身份证号">{{customer.idNumber}}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="紧急电话">{{customer.emergencyPhone}}</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="紧急联系人">{{customer.emergencyContact}}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="楼盘名称">{{customer.propertyName}}</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="户型" v-if="customer.houseType==10">一居室</el-form-item>
          <el-form-item label="户型" v-if="customer.houseType==20">二居室</el-form-item>
          <el-form-item label="户型" v-if="customer.houseType==30">三居室</el-form-item>
          <el-form-item label="户型" v-if="customer.houseType==40">三居及以上</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="面积">{{customer.houseSize}}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <el-form-item label="省份">{{customer.province}}</el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="城市">{{customer.city}}</el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="区县">{{customer.district}}</el-form-item>
        </el-col>
        <el-col :span="15">
          <el-form-item label="详细地址">{{customer.propertyAddr}}</el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <hr>
    <h3>定金信息</h3>
    <hr>
    <el-form>
      <el-form-item label="收款时间">{{deposit.collectionTime}}</el-form-item>
      <el-form-item label="订单金额">{{deposit.depositAmount}}</el-form-item>
      <el-form-item label="付款方式" v-if="deposit.paymentMethod==10">微信</el-form-item>
      <el-form-item label="付款方式" v-if="deposit.paymentMethod==20">支付宝</el-form-item>
      <el-form-item label="付款方式" v-if="deposit.paymentMethod==30">银行卡/信用卡</el-form-item>
      <el-form-item label="付款方式" v-if="deposit.paymentMethod==40">现金</el-form-item>
    </el-form>
    <hr>
    <h3>合同信息</h3>
    <hr>
    <el-form>
      <el-form-item label="录入时间">{{projectFunds.inputTime}}</el-form-item>
      <el-form-item label="基础施工">{{projectFunds.basicsBuildCost}}</el-form-item>
      <el-form-item label="设计费">{{projectFunds.designCost}}</el-form-item>
      <el-form-item label="录入人">{{projectFunds.keyboarder}}</el-form-item>
    </el-form>
<!--    <hr>-->
<!--    <h3>退单信息</h3>-->
<!--    <hr>-->
<!--    <el-form>-->
<!--      <el-timeline style="max-width: 600px">-->
<!--        <el-timeline-item placement="top">-->
<!--          <el-card>-->
<!--            <p>-->
<!--              <el-form-item label="退单类型">{{refund.refundType}}</el-form-item>-->
<!--              <el-form-item label="退单原因">{{refund.reasonOrder}}</el-form-item>-->
<!--              <el-form-item label="申请人">{{refund.applicationPerson}}</el-form-item>-->
<!--              <el-form-item label="申请时间">{{refund.startApplicationTime}}</el-form-item>-->
<!--            </p>-->
<!--          </el-card>-->
<!--        </el-timeline-item>-->
<!--        <el-timeline-item placement="top">-->
<!--          <el-card>-->
<!--            <p>-->
<!--              <el-form-item label="审核（部门经理）"></el-form-item>-->
<!--              <el-form-item label="审核意见">{{refund.auditAdvice1}}</el-form-item>-->
<!--              <el-form-item label="审核人">{{refund.auditor1}}</el-form-item>-->
<!--              <el-form-item label="审核时间">{{refund.auditTime1}}</el-form-item>-->
<!--            </p>-->
<!--          </el-card>-->
<!--        </el-timeline-item>-->
<!--        <el-timeline-item placement="top">-->
<!--          <el-card>-->
<!--            <p>-->
<!--              <el-form-item label="审核（总经办）"></el-form-item>-->
<!--              <el-form-item label="审核意见">{{refund.auditAdvice2}}</el-form-item>-->
<!--              <el-form-item label="审核人">{{refund.auditor2}}</el-form-item>-->
<!--              <el-form-item label="审核时间">{{refund.auditTime2}}</el-form-item>-->
<!--            </p>-->
<!--          </el-card>-->
<!--        </el-timeline-item>-->
<!--      </el-timeline>-->
<!--    </el-form>-->
    <hr>
    <h3>退单操作</h3>
    <hr>
    <el-form>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="退单状态" v-if="refund.refundStatus==1">待处理</el-form-item>
          <el-form-item label="退单状态" v-if="refund.refundStatus==2">已处理</el-form-item>
          <el-form-item label="操作人">{{refund.operator}}</el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>


</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import request from "@/utils/request";

const id = new URLSearchParams(window.location.search).get('id');

const customer = ref({
  id:'',
  status:'',
  type:'',
  name:'',
  gender:'',
  age:'',
  contactPhone:'',
  idNumber:'',
  emergencyPhone:'',
  emergencyContact:'',
  propertyName:'',
  houseType:'',
  houseSize:'',
  province:'',
  city:'',
  district:'',
  propertyAddr:''
  // id:'1',
  // status:'10',
  // type:'10',
  // name:'小李',
  // gender:'男',
  // age:'26',
  // contactPhone:'12345678910',
  // idNumber:'350181199612101798',
  // emergencyPhone:'12345678910',
  // emergencyContact:'小李',
  // propertyName:'西钓鱼台嘉园',
  // houseType:'三居室',
  // houseSize:'245㎡',
  // id:'1',
  // clientStatus:'转单中',
  // clientType:'现房客户',
  // clientName:'小李',
  // gender:'男',
  // age:'26',
  // phone:'12345678910',
  // numberId:'350181199612101798',
  // housesName:'西钓鱼台嘉园',
  // housesType:'三居室',
  // acreage:'245㎡',
  // detailAddress:'北京市 海淀区 海淀西三环钓鱼台村1栋3单元'
})
const loadCustomer = (id)=>{
  request.get('/api/crm/refund/selectCustomer/'+id).then((response)=>{
      customer.value = response.data;
  })
}

const deposit = ref({
  collectionTime:'',
  depositAmount:'',
  paymentMethod:'',
  // collectionTime:'2024-02-02',
  // depositAmount:'5000',
  // paymentMethod:'微信',
})
const loadDeposit = (id)=>{
  request.get('/api/crm/refund/selectDeposit/'+id).then((response)=>{
      deposit.value = response.data;
  })
}

const projectFunds = ref({
  inputTime:'',
  basicsBuildCost:'',
  designCost:'',
  keyboarder:''
  // inputTime:'2024-02-01',
  // basicsBuildCost:'60000',
  // designCost:'6000',
  // keyboarder:'小张'
});
const loadprojectFunds = (id)=>{
  request.get('/api/crm/refund/selectContract/'+id).then((response)=>{
      projectFunds.value = response.data;
  })
}


const refund = ref({
  refundType:'',
  refundReason:'',
  applicationPerson:'',
  auditTime1:'',
  auditAdvice1:'',
  auditor1:'',
  auditAdvice2:'',
  auditor2:'',
  auditTime2:'',
  startApplicationTime:'',
  refundStatus:'',
  operator:''
  // refundType:'退定金',
  // refundReason:'不想装修了',
  // applicationPerson:'小红',
  // auditTime1:'2024-02-13',
  // auditAdvice1:'通过',
  // auditor1:'王总',
  // auditAdvice2:'通过',
  // auditor2:'赵总',
  // auditTime2:'2024-02-14',
  // startApplicationTime:'2024-02-12',
  // refundStatus:'已处理',
  // operator:'小李'
});

const loadRefund = (id)=>{
  request.get('/api/crm/refund/selectById/'+id).then((response)=>{
      refund.value = response.data;
  })
}

onMounted(()=>{
  loadRefund(id);
  loadprojectFunds(id);
  loadDeposit(id);
  loadCustomer(id);
})


</script>


<style scoped>

</style>